<template>
	<view class="container">
		<!-- 默认用法 直接传入md文本即可-->
		<zero-markdown-view themeColor="#333" :markdown="markdown"></zero-markdown-view>
		<!-- <zero-markdown-view themeColor="#333" :markdown="content"></zero-markdown-view> -->
	</view>
</template>
<script setup>
	import {
		ref,
		computed,
		defineProps
	} from "vue"

	const props = defineProps({
		markdown: {
			type: String,
			required: true
		}
	});

	// 使用 markdown 数据
	console.log("markdown")
	console.log(props.markdown);
	// defineProps({
	// 	content: {
	// 		type: String,
	// 		default:'发撒发撒答复撒'
	// 	}
	// })
	// const content = ref(
	// 	'\n# 一级标题\n\n## 二级标题\n\n### 三级标题\n\n### 1.2 无序列表\n\n无序列表的使用，在符号`-`后加空格使用。如下：\n- 无序列表 1\n- 无序列表 2\n  - 无序列表 2.1\n  - 无序列表 2.2\n\n**由于微信原因，最多支持到二级列表**。\n\n### 1.3 有序列表\n\n1. 有序列表 1\n2. 有序列表 2\n\n\n### 1.4 粗体和斜体\n\n**这个是粗体**\n\n_这个是斜体_\n\n**_这个是粗体加斜体_**\n\n\n### 1.5 链接\n\n对于该论述，欢迎读者查阅之前发过的文章，[你是《未来世界的幸存者》么？](https://mp.weixin.qq.com/s/s5IhxV2ooX3JN_X416nidA)\n\n### 1.6 引用\n\n> ### 一级引用示例\n> \n> 读一本好书，就是在和高尚的人谈话。 **——歌德**\n\n### 1.7 分割线\n\n可以在一行中用三个以上的减号来建立一个分隔线，同时需要在分隔线的上面空一行。如下：\n\n---\n\n### 1.8 删除线\n\n删除线的使用，在需要删除的文字前后各使用两个`~`，如下：\n\n~~这是要被删除的内容。~~\n\n### 1.9 表格\n\n| 姓名       | 年龄 |         工作 |\n| :--------- | :--: | -----------: |\n| 作者     |  18  |     web |\n| zerojs   |  20  |  前端 |\n| 太菜了 |  22  | 躺平 |\n\n\n## 2. 特殊语法\n\n### 2.1 脚注\n\n脚注与链接的区别如下所示：\n\n```markdown\n链接：[文字](链接)\n脚注：[文字](脚注解释 "脚注名字")\n```\n### 2.2 代码块\n\n```js\nconsole.log("1");\n\nsetTimeout(function () {\n  console.log("2");\n  process.nextTick(function () {\n    console.log("3");\n  });\n  new Promise(function (resolve) {\n    console.log("4");\n    resolve();\n  }).then(function () {\n    console.log("5");\n  });\n});\n```\n\ndiff 不能同时和其他语言的高亮同时显示，且需要调整代码主题为微信代码主题以外的代码主题才能看到 diff 效果，使用效果如下:\n\n```diff\n+ 新增项\n- 删除项\n```\n\n**其他主题不带行号，可自定义是否换行，代码大小与当前编辑器一致**\n\n\n\n## 3 其他语法\n\n### 3.1 HTML\n\n支持原生 HTML 语法，请写内联样式，如下：\n\n<span style="display:block;text-align:right;color:orangered;">橙色居右</span>\n<span style="display:block;text-align:center;color:orangered;">橙色居中</span>\n\n### 3.2 UML\n\n不支持，推荐使用开源工具`https://draw.io/`制作后再导入图片''
	// 	)
	const msgContent = computed(() => {
		if (!props.markdown) {
			return '';
		}
		// if (content.value) {
		// 	return '';
		// }
		let htmlString = '';
		// 判断markdown中代码块标识符的数量是否为偶数
		if (props.markdown.split('```').length % 2) {
			let contentStr = props.markdown;
			if (contentStr[contentStr.length - 1] !== '\n') {
				contentStr += '\n';
			}
			htmlString = contentStr;
		} else {
			// htmlString = content.value;
			htmlString = props.markdown;
		}
		
		// if (content.value.split('```').length % 2) {
		// 	let contentStr = content.value;
		// 	if (contentStr[contentStr.length - 1] !== '\n') {
		// 		contentStr += '\n';
		// 	}
		// 	htmlString = contentStr;
		// } else {
		// 	htmlString = content.value;
		// }
		return htmlString;
	});
</script>
<style lang="scss" scoped></style>